<template>
    <div class="about">
      <!-- {{accountList}} -->
      <button v-on:click='getTableData'>获取数据</button>
      <ul>
        <li v-for="row in tableList" v-on:click='handleClick(row)' :key='row.id'>
            {{ row.username }}
          </li>
      </ul>
    </div>
  </template>


  <script>
    import AccountList from './../../graphql/accountList.graphql'   
    import gql from 'graphql-tag';
    // const accountListGql = gql`{
    // accountList {
    //     id
    //     username
    //     password
    //  }
    // }`;
      
    export default {
      name: 'graphql',
      data() {
          return {
             tableList: []
          }
      },
      mounted(){
          console.log(this)
          this.getTableData()
      },
      methods: {
        getTableData(){
            this.$apollo.query({
                query: AccountList,
                fetchPolicy: 'no-cache'
            }).then(response => {
                console.log(response);
                const { accountList } = response.data;
                this.tableList =accountList;
            })
        },
        handleClick (rowData) {
            this.$apollo.query({
                query: gql`
                    query ($id: ID!){
                        account(id: $id) {
                            id
                            username
                            password
                       }
                    }
                  
                `,
                variables: {
                  id: rowData.id,
                }
            }).then(response => {
                console.log('查询单条数据', response.data);
            })
        },
      }
    }
    </script>